<script lang="ts" setup>
import aiOne from '@/imgs/ai-one.png';
import aiTwo from '@/imgs/ai-two.png';
import aiThree from '@/imgs/ai-three.png';
import wenshuOne from '@/imgs/wenshu-one.png';
import wenshuTwo from '@/imgs/wenshu-two.png';
import wenshuThree from '@/imgs/wenshu-three.png';
import heyanOne from '@/imgs/heyan-one.png';
import heyanTwo from '@/imgs/heyan-two.png';
import heyanThree from '@/imgs/heyan-three.png';
import shenheOne from '@/imgs/shenhe-one.png';
import shenheTwo from '@/imgs/shenhe-two.png';
import shenheThree from '@/imgs/shenhe-three.png';
import capacitySvg from '@/imgs/capacity.svg';
import { ref } from 'vue';

const appCards = ref([
  {
    name: 'AI对话',
    uuid: 'ai',
    // path: 'http://123.249.71.102:39002',
    path: '/longgang/chat',
    infos: [
      {
        title: '自然语言理解',
        desc: '基于先进的NLP技术，能够理解复杂的自然语言输入，准确把握用户意图',
        img: aiOne,
        nengli: ['语义理解', '语言转换', '逻辑推理']
      },
      {
        title: '多轮对话能力',
        desc: '支持上下文连贯的多轮对话，记住对话历史，提供连贯的回复',
        img: aiTwo,
        nengli: ['多轮对话', '记忆能力', '逻辑通畅']
      },
      {
        title: '知识库集成',
        desc: '集成企业知识库，能够回答专业领域问题，提供准确的信息',
        img: aiThree,
        nengli: ['专业知识库', '智能搜索', '精准匹配']
      },
    ]
  },
  {
    name: '智能问数',
    uuid: 'wenshu',
    path: 'https://ai-wenshu.llm.gtsh.echo-isoftstone.cn/#/',
    infos: [
      {
        title: '自然语言转SQL',
        desc: '将用户的自然语言问题转换为精确的SQL查询，无需编写代码',
        img: wenshuOne,
        nengli: ['自然语言理解能力', 'SOL转换能力']
      },
      {
        title: '数据饼状图',
        desc: '数据类别较必开分部分和整体的关系，根据数据情况选择对应的图表样式展示。',
        img: wenshuTwo,
        nengli: []
      },
      {
        title: '数据折线图',
        desc: '数量较大时适用据对数据变化剧烈还规律是数据精确度不高时适用根据数据自动生成折线图。',
        img: wenshuThree,
        nengli: ['数据检索能力', '视图分析能力']
      },
    ]
  },
  {
    name: '内容审核',
    uuid: 'shenhe',
    path: '/pengwei/analyze-word',
    infos: [
      {
        title: '智能数据结构化提取',
        desc: '对文本中不规则数据，通过大模型能力对数据进行提取、整理，形成结构化数据',
        img: shenheOne,
        nengli: []
      },
      {
        title: '实时审核能力',
        desc: '秒毫级响应，支持大规模内容的实时审查，满足高并发场景需求',
        img: shenheTwo,
        nengli: []
      },
      {
        title: '自定义审核规则',
        desc: '支持企业自定义审核规则和敏感词库，灵活适应不同业务场景',
        img: shenheThree,
        nengli: []
      },
    ]
  },
  {
    name: '数据核验',
    uuid: 'heyan',
    path: 'http://123.249.71.102:39001',
    infos: [
      {
        title: '智能数据清洗',
        desc: '自动识别并修复数据中的错误、缺失和异常值，提高数据质量',
        img: heyanOne,
        nengli: ['数据识别', '数据清洗']
      },
      {
        title: '数据一致性检查',
        desc: '跨系统、跨数据源的数据一致性验证，确保数据的准确性和可靠性',
        img: heyanTwo,
        nengli: []
      },
      {
        title: '数据质量报告',
        desc: '生成详细的数据质量报告，提供数据问题的可视化分析和改进建议',
        img: heyanThree,
        nengli: ['数据分析', '报告生成']
      },
    ]
  },
])
</script>

<template>
  <section v-for="(appCard, index) in appCards" :id="appCard.uuid" class="app-item">
    <div class="name">{{ appCard.name }}</div>
    <div class="capacity capacity-top">
      <div class="capacity-left">
        <div class="capacity-text">
          <div class="capacity-title">{{ appCard.infos[0].title }}</div>
          <div v-html="appCard.infos[0].desc" class="capacity-desc"></div>
        </div>
        <div class="capacity-detail">
          <div v-for="item in appCard.infos[0].nengli">
            <img :src="capacitySvg" alt="">
            <span>{{ item }}</span>
          </div>
        </div>
      </div>
      <img :src="appCard.infos[0].img" alt="">
    </div>
    <div class="capacitys">
      <div class="capacity capacity-bottom flex-1">
        <div class="capacity-title">{{ appCard.infos[1].title }}</div>
        <div v-html="appCard.infos[1].desc" class="capacity-desc"></div>
        <div class="capacity-detail">
          <div v-for="item in appCard.infos[1].nengli">
            <img :src="capacitySvg" alt="">
            <span>{{ item }}</span>
          </div>
        </div>
        <img :src="appCard.infos[1].img" alt="">
      </div>
      <div class="capacity capacity-bottom flex-1">
        <div class="capacity-title">{{ appCard.infos[2].title }}</div>
        <div v-html="appCard.infos[2].desc" class="capacity-desc"></div>
        <div class="capacity-detail">
          <div v-for="item in appCard.infos[2].nengli">
            <img :src="capacitySvg" alt="">
            <span>{{ item }}</span>
          </div>
        </div>
        <img :src="appCard.infos[2].img" alt="">
      </div>
    </div>

    <!-- 按钮 -->
    <a
      :href="appCard.path"
      target="_blank"
      class="button-container"
    >
      <button>
        <span class="mr-2">立即体验</span>
        <el-icon><ArrowRight /></el-icon>
      </button>
    </a>
  </section>
</template>

<style lang="scss" scoped>
  .app-item {
    font-family: PingFang SC, PingFang SC;
    padding-bottom: 80px;
    .name {
      text-align: center;
      margin-bottom: 20px;
      color: #242424;
      font-size: 40px;
    }
    .capacitys {
      display: flex;
      gap: 16px;
      .flex-1 {
        flex: 1;
      }
    }
    .capacity {
      background-color: white;
      border-radius: 24px;
      margin-top: 26px;
      .capacity-title {
        margin-bottom: 32px;
        font-size: 32px;
      }
      .capacity-detail {
        display: flex;
        margin-bottom: 35px;
        div {
          display: flex;
          align-items: center;
          margin-right: 20px;
          img {
            margin-right: 8px;
          }
        }
      }
    }
    .capacity-top {
      height: 446px;
      padding-top: 100px;
      padding-left: 50px;
      position: relative;
      flex: 1;
      background: linear-gradient( 180deg, #add3ec 0%, #bad3fa 100%), linear-gradient( 3deg, #aacbf1 0%, #b6d4f3 100%), radial-gradient( 70% 87% at 31% 49%, #C9EFFE 0%, rgba(201,239,254,0) 100%), #FFFFFF;

      .capacity-desc {
        font-size: 20px;
        color: #8C8C8C;
        line-height: 2;
        margin-bottom: 50px;
      }

      .capacity-left {
        width: 40%;
      }

      & > img {
        width: 55%;
        position: absolute;
        bottom: 0;
        right: 0;
        box-shadow: -23px -3px 33px 2px rgba(0,80,156,0.15);
        border-radius: 24px;
      }

    }

    .capacity-bottom {
      padding-top: 80px;
      padding-left: 50px;
      .capacity-desc {
        font-size: 20px;
        color: #8C8C8C;
        line-height: 2;
        margin-bottom: 20px;
      }
      &>img {
        box-shadow: 0px 0px 97px 16px rgba(21,78,131,0.1);
      }
    }


    .button-container {
      margin-top: 30px;
      display: flex;
      justify-content: center;
      button {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-family: semibold;
        border-radius: 50px;
        padding: 10px 20px;
        border: 1px solid #DC291C;
        color: #FF4C60;
        transition: all .3s ease-in-out;
        background: transparent;
        span {
          margin-right: 10px;
        }
        &:hover {
          // background-color: #FF4C60;
          // color: white;
          box-shadow: 2px 8px 20px 0 rgba(219,180,188,0.3);
        }
      }
    }
  }
</style>
